<template>
  <div class="navbar">
    <span @click="toggleLeft()" >
      <app-svg-icon :iconClass="'gear'"></app-svg-icon>
    </span>
    <span @click="changeLevel(1)">
      <app-svg-icon :iconClass="'1'"></app-svg-icon>
    </span>
        <span @click="changeLevel(2)">
      <app-svg-icon :iconClass="'2'"></app-svg-icon>
    </span>
        <span @click="changeLevel(3)">
      <app-svg-icon :iconClass="'3'"></app-svg-icon>
    </span>
    <span @click="changeLevel(4)">
      <app-svg-icon :iconClass="'4'"></app-svg-icon>
    </span>
    <span></span>
    <span class="fill-remaining-space"></span>
    <span @click="toggleView()">
      <app-svg-icon :iconClass="'navigation'"></app-svg-icon>
    </span>
    <span @click="toggleRight()">
      <app-svg-icon  :iconClass="'expand'"></app-svg-icon>
    </span>

  </div>
</template>
<script>
import bus from "../../bus";

export default {
  name: "AppNavbar",
  methods: {
    toggleLeft() {
      this.$emit("toggleLeft");
    },
    toggleRight() {
      this.$emit("toggleRight");
    },
    toggleView() {
      this.$emit("toggleView");
    },
    changeLevel(level) {
      this.$emit("changeLevel", level);
    }
  }
};
</script>
<style>
.navbar {
  min-height: 40px;
  padding: 0 20px;
  border-radius: 3px;
  border: 1px solid #ccc;
  margin: 5px;
  display: flex;
  align-items: center;
}
.navbar .fill-remaining-space {
  flex: 1;
}
.navbar span {
  color: #000;
  margin: 0 5px;
}
</style>

